<template>
<div class="baseDesign-container">
    <FlowHeader :submit="submitDat" v-on:routHandle="routHandle" v-on:back='isBack' />
    <div class="content">
        <div class="formItem"><span class="tit">审批名称：</span>
            <div class="contInput">
                <el-input size="mini" v-model="baseFrom.name" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <div class="formItem"><span class="tit">所属分类：</span>
            <el-select v-model="baseFrom.groupType" size="mini" placeholder="请选择">
                <el-option label="出勤休假" value="1" />
                <el-option label="财务" value="2" />
                <el-option label="人事" value="3" />
                <el-option label="行政" value="4" />
                <el-option label="其他" value="5" />
            </el-select>
        </div>
        <div class="formItem"><span class="tit">谁可以发起这个审批：</span>
            <Cascader v-if="baseFrom.allowUserJson && isLodding" v-on:getValue="getValue" :dialogVisible="dialogVisible" setStyle="width: 300px;background: #fff;" :checkListDataes="baseFrom.allowUserJson"></Cascader>
        </div>
        <div class="formItem"><span class="tit">模板图标：</span>
            <div class="contInput">
                <el-upload class="avatar-uploader" :action="baseURL + `/sys/company/uploadOSS`" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="baseFrom.icon" :src="baseFrom.icon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>
        <div class="formItem"><span class="tit">审批说明：</span>
            <div class="contInput">
                <el-input type="textarea" @input="isMakHand" size="mini" v-model="baseFrom.description" placeholder="最多100字"></el-input>
            </div>
        </div>
        <div class="formItem"><span class="tit">审批意见填写提示：</span>
            <div class="contInput">
                <el-input size="mini" v-model="baseFrom.opinionPrompt" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <div class="formItem"><span class="tit">审批意见是否必填：</span>
            <el-checkbox :value="isMak" @input="isMakHand">必填</el-checkbox>
        </div>
    </div>
</div>
</template>

<script>
  import FlowHeader from '@/components/FlowHeader'
  import {mapGetters} from 'vuex'
  import Cascader from './../../components/Cascader'
  import {baseURL} from './../../utils/request'
  import Compare from '@/utils/compareJson.js'

  export default {
    name: 'Dashboard',
    components: {
        FlowHeader,
        Cascader
    },
    data() {
        return {
            checked: true,
            value: '',
            imageUrl: '',
            dialogVisible: false,
            isLodding: false,
            isMak: true,
            groupList: [],
            baseFrom: {
                name: '',
                allowUserJson: [],
                description: '',
                groupType: '1',
                icon: '',
                opinionPrompt: '',
                opinionRequired: '1'
            },
            baseFromBeff: {
                name: '',
                allowUserJson: [],
                description: '',
                groupType: '1',
                icon: '',
                opinionPrompt: '',
                opinionRequired: '1'
            },
            baseURL,
            headers: {
                Authorization: this.$store.getters.token || ''
            },
            fileList: [],
            logoUrl: '',
        }
    },
    computed: {
        ...mapGetters([
            'flowId',
            'baseData',
            'tableData',
            'flowData',
        ])
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            if (this.flowId) {
                await this.$store.dispatch('approval/getFlowInfoAct', {
                    id: this.flowId
                }).then((res) => {
                    this.$store.dispatch('approval/setflowdata', {
                        ...res
                    })
                    this.$store.dispatch('approval/setflowid', '')
                    this.baseFrom = res.baseData
                    res.baseData.allowUserJson ? this.baseFrom.allowUserJson = res.baseData.allowUserJson : null
                    this.baseFrom.opinionRequired = res.opinionRequired == '1' ? true : false
                    this.baseFromBeff = JSON.parse(JSON.stringify(this.baseFrom))
                    this.isLodding = true
                    this.loading = false
                }).catch(() => {
                    this.$message.error('数据请求失败！请稍后重试')
                    this.isLodding = true
                    this.loading = false
                })
            } else {
                if (!this.baseData || this.baseData.length == 0) {
                    this.baseFrom = {
                        name: '',
                        allowUserJson: [],
                        description: '',
                        groupType: '1',
                        icon: '',
                        opinionPrompt: '',
                        opinionRequired: '1'
                    }
                    this.baseFromBeff = {
                        name: '',
                        allowUserJson: [],
                        description: '',
                        groupType: '1',
                        icon: '',
                        opinionPrompt: '',
                        opinionRequired: '1'
                    }
                } else {
                    this.baseFrom = this.baseData
                    this.baseFromBeff = JSON.parse(JSON.stringify(this.baseData))
                }
                this.isLodding = true
            }
        },
        routHandle(url) {
            if (this.verificationHandle()) {
                this.$store.dispatch('approval/setflowdata', {
                    baseData: this.baseFrom
                })
                if (!Compare(JSON.parse(JSON.stringify(this.baseFrom)), JSON.parse(JSON.stringify(this.baseFromBeff)))) {
                    this.$store.dispatch('approval/setBack')
                }
                this.$router.push(url)
            }
        },
        isBack(val) {
            if (!Compare(JSON.parse(JSON.stringify(this.baseFrom)), JSON.parse(JSON.stringify(this.baseFromBeff)))) {
                this.$store.dispatch('approval/setBack')
            }
        },
        getValue(val) {
            this.baseFrom.allowUserJson = val.map(n => {
                return {
                    objectId: n.id,
                    objectType: n.type
                }
            })
        },
        isMakHand(val) {
            this.isMak = val
        },
        // 提交数据验证
        verificationHandle() {
            if (this.baseFrom.name.length >= 2) {
                return true
            } else {
                this.$message.error('请输入审批名称！')
                return false
            }
        },

        async submitDat() {
            if (this.verificationHandle()) {
                const tableData = []
                this.tableData.forEach(n => {
                    tableData.push({
                        ...n,
                        title: n.data.title,
                        data: typeof (n.data) === 'string' ? n.data : JSON.stringify(n.data)
                    })
                })
                const pramas = {
                    baseData: this.baseData,
                    tableData,
                    flowData: this.flowData
                }
                this.baseFrom.opinionRequired = this.isMak ? '1' : 0
                await this.$store.dispatch('approval/setflowdata', {
                    baseData: this.baseFrom
                })
                await this.$store.dispatch('approval/setflowst', '')
                const data = await this.$store.dispatch('approval/addFlowInfoAct', {
                    ...pramas
                })
                if (data.success) {
                    this.$store.dispatch('approval/setBack', true)
                    this.$message.success('数据发布成功！')
                    this.$router.push('/approval/admin')
                } else {
                    this.$message.success(data.message)
                }
            }

        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.baseFrom.icon = res.data
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        }
    }
}
</script>

<style>
.baseDesign-container .el-input--mini .el-input__inner,
.el-textarea__inner {
    width: 300px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    background: #fff;
    color: #c8c9d5;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>
<style lang="scss">
.baseDesign {
    &-container {
        .content {
            width: 800px;
            margin: 30px auto;
            margin-top: 90px;
            line-height: 2;

            .formItem {
                display: flex;
                margin: 30px 0;

                .tit {
                    display: inline-block;
                    text-align: right;
                    width: 300px;
                    color: #666666;
                }

                .contInput {
                    flex: 1;
                }
            }
        }
    }
}
</style>
